<template>
    <div>
        <el-card shadow="never">
            <div style="
    margin: 0 auto;" slot="header">
                <span style="float:left;">账号设置</span>
                <span style="font-size: 12px;
    font-family: PingFangSC-Regular;
    color: rgba(112, 118, 130, 1);
    line-height: 17px;
    margin-left: 16px;">修改个人资料</span>
            </div>

            <el-row style="margin-top: 62px;">
                <el-col :span="8">
                    <el-upload class="avatar-uploader" action="/api/app/home/file/add" :show-file-list="false" :headers="uploadHeaders()" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img :src="getAvaterUrl(custom.avater_url)" class="avatar">
                        <img src="/assets/change.png" style="width:10px;height:10px;margin-top:14px;">
                        <span style="margin-left:4px;font-size: 12px;">更改头像</span>
                    </el-upload>
                </el-col>
                <el-col :span="10">
                    <el-form :model="custom" label-width="80px" ref="custom" :rules="rules">
                        <el-form-item label="账号">
                            <el-input v-model="custom.phone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="custom.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="QQ" prop="qq">
                            <el-input v-model="custom.qq"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="custom.sex">
                                <el-radio label="0">男</el-radio>
                                <el-radio label="1">女</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="个性签名">
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="custom.signature">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit('custom')">确认修改</el-button>
                            <el-button @click="goBack">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            custom: {
                avater_id: 0,
                nickname: "",
                qq: "",
                sex: 0,
                signature: ""
            },
            rules: {
                nickname: [
                    {
                        required: true,
                        message: "请输入昵称",
                        trigger: "change"
                    }
                ],
                qq: [
                    {
                        required: true,
                        message: "请输入qq",
                        trigger: "change"
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    async asyncData({ app }) {
        let data = {};
        // 获取当前登陆的用户
        const custom = await app.$axios.$get(
            "/api/app/home/base/getCustomInfo"
        );
        if (custom && custom.errmsg === "ok") {
            data.custom = custom.data;
            data.custom.sex = data.custom.sex.toString();
        }

        return data;
    },
    methods: {
        onSubmit(custom) {
            this.$refs[custom].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            // 修改信息
            const custom = await this.$axios.$post(
                "/api/app/home/custom/update",
                {
                    avater_url: this.custom.avater_url,
                    nickname: this.custom.nickname,
                    qq: this.custom.qq,
                    sex: this.custom.sex,
                    signature: this.custom.signature
                }
            );

            this.$cookies.set(
                "custom",
                Object.assign(this.$cookies.get("custom"), {
                    avater_url: this.custom.avater_url,
                    nickname: this.custom.nickname,
                    qq: this.custom.qq,
                    sex: this.custom.sex,
                    signature: this.custom.signature
                }),
                {
                    path: "/",
                    domain: this.getCoryright(),
                    maxAge: 60 * 60 * 24 * 7
                }
            );
            this.$store.commit("SET_CUSTOM", this.$cookies.get("custom"));
            this.$router.push("/app/apps");
        },
        async handleAvatarSuccess(res, file) {
            await this.$axios.$post("/api/app/home/custom/update", {
                avater_url: res.data
            });
            this.$cookies.set(
                "custom",
                Object.assign(this.$cookies.get("custom"), {
                    avater_url: res.data
                }),
                {
                    path: "/",
                    domain: this.getCoryright(),
                    maxAge: 60 * 60 * 24 * 7
                }
            );
            this.$store.commit("SET_CUSTOM", this.$cookies.get("custom"));
            this.$router.go(0);
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style scoped>
.avatar-uploader {
    margin: 80px 0 0 177px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
}
</style>
